<template>
    <div class="app-header d-flex justify-content-between align-items-center">
        <div></div>
        <div class="d-flex align-items-center">
            <el-avatar
                :size="40"
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
            <el-dropdown trigger="click" @command="handleCommand">
                <div class="el-dropdown-link">
                    <el-icon class="el-icon--right">
                        <CaretBottom />
                    </el-icon>
                </div>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>个人空间</el-dropdown-item>
                        <el-dropdown-item command="logout">
                            退出登录
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
        </div>
    </div>
</template>

<script setup lang="ts">
import { CaretBottom } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { logout } from '@/api/user'
import { TokenStorage, UserStorage } from '@/utils/localStorange.ts'

const router = useRouter()

const handleCommand = async (command: string) => {
    if (command === 'logout') {
        await logout()
        TokenStorage.remove()
        UserStorage.remove()
        await router.push('/login')
    }
}
</script>

<style scoped lang="scss">
.app-header {
    box-sizing: border-box;

    //background-color: #334154;
    //color: #f8f9fa;
    width: 100%;
    height: 60px;
    box-shadow:
        0 2px 4px rgb(0 0 0 / 12%),
        0 0 6px rgb(0 0 0 / 4%);

    .el-dropdown-link {
        position: relative;
        width: 30px;
        height: 60px;

        .el-icon--right {
            position: absolute;
            bottom: 10px;
            left: 0;
        }
    }
}
</style>
